
<template>
  <div>
     <hr>
      个人中心的子组件
      <img v-if="loaded" :src="result[0].url" alt="">
      <div v-if="!loaded" class="loding">
        <h1>猫加载中....</h1>
      </div>
  </div>
</template>
<script lang="ts">
import {getAnimal} from './hook/useDog'
import {defineComponent} from 'vue'
interface CatFace{
    height:number
    id: string
    url:string
    width: number
}

export default defineComponent({
    props:["myname"],
    setup(props,context) {
      // setup的第一个参数是props 
      // context---{attrs,slots,emit} 
      // console.log(context.attrs)//父组件给子组件传递的属性
      // console.log(context.slots) //父组件给子组件传递的插槽
      // console.log(context.emit()) //触发的事件
      console.log(props.myname)
      let {result,error,loaded}=getAnimal<CatFace[]>("https://api.thecatapi.com/v1/images/search?limit=1")
      return{
        result,
        error,
        loaded
      }
    }
})
</script>
<style lang="less">

      
</style>